import React from 'react';
import { Typography, Card } from 'antd';
import { useTheme, themeBackgrounds } from '../../contexts/ThemeContext';

const { Title, Paragraph } = Typography;

interface FeatureItem {
  title: string;
  description: string;
  icon: string;
}

interface FeatureSectionProps {
  features: FeatureItem[];
}

const FeatureSection: React.FC<FeatureSectionProps> = ({ features }) => {
  const { themeType } = useTheme();
  const isDark = themeType === 'dark';

  return (
    <div style={{ 
      padding: '80px 24px', 
      background: isDark ? '#141519' : '#F7F8FC'
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Title 
          level={2} 
          style={{ 
            textAlign: 'center', 
            marginBottom: 64,
            color: isDark ? '#fff' : '#000'
          }}
        >
          核心特性
        </Title>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
          {features.map((feature, index) => (
            <Card 
              key={index} 
              bordered={false}
              style={{ 
                background: isDark 
                  ? 'rgba(30, 30, 40, 0.5)' 
                  : 'rgba(255, 255, 255, 0.8)',
                borderRadius: 12,
                boxShadow: isDark 
                  ? 'none' 
                  : '0 4px 12px rgba(0, 0, 0, 0.05)'
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div 
                  style={{ 
                    width: 48, 
                    height: 48, 
                    borderRadius: 8, 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center',
                    background: isDark 
                      ? 'rgba(111, 76, 255, 0.1)' 
                      : 'rgba(111, 76, 255, 0.05)'
                  }}
                >
                  <img src={feature.icon} alt={feature.title} style={{ width: 24, height: 24 }} />
                </div>
                <div>
                  <Title 
                    level={4} 
                    style={{ 
                      margin: 0,
                      color: isDark ? '#fff' : '#000' 
                    }}
                  >
                    {feature.title}
                  </Title>
                  <Paragraph style={{ 
                    margin: 0, 
                    opacity: 0.7,
                    color: isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'
                  }}>
                    {feature.description}
                  </Paragraph>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FeatureSection; 